import { useEffect, useState } from 'react'
import './rightpanel.less'
// import { useDispatch, useSelector } from 'react-redux'
// import { setShowRightPanel } from '@/store/showPanel.js'

const Rightpanel = ({ children }) => {
  const [haveRgihtPanel, setHaveRgihtPanel] = useState(true)
  const [showRightPanel, setRightPanel] = useState('')
  const [rightPanelAnimation, setRightPanelAnimation] = useState(
    'animate__fadeInRight'
  )

  // const dispatch = useDispatch()

  // useEffect(() => {
  //   dispatch(setShowRightPanel(true))
  //   return () => {
  //     dispatch(setShowRightPanel(false))
  //   }
  // }, [])

  //控制右侧面板的展示
  const changeRightPanelShow = () => {
    if (showRightPanel === 'none') {
      setRightPanelAnimation('animate__fadeInRight')
      setRightPanel('')
    } else {
      setRightPanelAnimation('animate__fadeOutRight')
      setTimeout(() => {
        setRightPanel('none')
      }, 800)
    }
  }

  return (
    <>
      {haveRgihtPanel ? (
        showRightPanel !== 'none' ? (
          <div
            className={`global-right-panel animate__animated ${rightPanelAnimation}`}
            style={{ display: showRightPanel }}
          >
            <div
              className="right-control-panel-close"
              onClick={changeRightPanelShow}
            ></div>
            {children}
          </div>
        ) : (
          <div className="global-right-panel-none">
            <div
              className="right-control-panel-open"
              onClick={changeRightPanelShow}
            ></div>
          </div>
        )
      ) : null}
    </>
  )
}

export default Rightpanel
